<template>
  <div class="footerDiv">
    <van-tabbar
      v-model="active"
      active-color="#ee0a24"
      @change="onFooterBtnChange"
    >
      <van-tabbar-item v-for="(n, inx) in icon" :key="inx" :to="to_list[inx]">
        <span>{{ n.icon_text }}</span>
        <template #icon="props">
          <div :class="props.active ? n.active : n.inactive"></div>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "footer_bar",
  data() {
    return {
      active: 0,
      icon: [
        {
          active: "footerIcon footerIcon_1_red",
          inactive: "footerIcon footerIcon_1",
          icon_text: "首页",
        },

        {
          active: "footerIcon footerIcon_2_red",
          inactive: "footerIcon footerIcon_2",
          icon_text: "分类",
        },

        {
          active: "footerIcon footerIcon_3_red",
          inactive: "footerIcon footerIcon_3",
          icon_text: "值得买",
        },

        {
          active: "footerIcon footerIcon_4_red",
          inactive: "footerIcon footerIcon_4",
          icon_text: "购物车",
        },

        {
          active: "footerIcon footerIcon_5_red",
          inactive: "footerIcon footerIcon_5",
          icon_text: "个人",
        },
      ],
      to_list: ["/", "/cateList", "", "", "/login"],
    };
  },
  mounted() {
    let _inx = localStorage.getItem("saveInx");
    this.active = Number(_inx);
  },
  methods: {
    onFooterBtnChange(_inx) {
      localStorage.setItem("saveInx", _inx);
    },
  },
};
</script>
<style scoped>
/*自定义footer按钮图标*/
.footerIcon {
  background-repeat: no-repeat;
  background-size: 0.5333rem;
  width: 0.53rem;
  height: 0.53rem;
  margin: 0 auto 0.09333rem auto;
}
.footerIcon_1 {
  background-image: url("../assets/footer_icon.png");
  background-position: 0 -168px;
}
.footerIcon_1_red {
  background-image: url("../assets/footer_icon.png");
  background-position: 0px -135px;
}
/**/
.footerIcon_2 {
  background-image: url("../assets/footer_icon.png");
  background-position: 0 -100px;
}
.footerIcon_2_red {
  background-image: url("../assets/footer_icon.png");
  background-position: 0 -66px;
}
/**/
.footerIcon_3 {
  background-image: url("../assets/footer_icon.png");
  background-position: 0px -238px;
}
.footerIcon_3_red {
  background-image: url("../assets/footer_icon.png");
  background-position: 0px -205px;
}
/**/
.footerIcon_4 {
  background-image: url("../assets/footer_icon.png");
  background-position: 0 -33px;
}
.footerIcon_4_red {
  background-image: url("../assets/footer_icon.png");
  background-position: 0 0;
}
/**/
.footerIcon_5 {
  background-image: url("../assets/footer_icon.png");
  background-position: 0 -306px;
}
.footerIcon_5_red {
  background-image: url("../assets/footer_icon.png");
  background-position: 0 -272px;
}
</style>